 //导航滑动效果
 (function() {
    const list = document.querySelector('.read-box')
    const line = document.querySelector('.line')
    const zuopins = document.querySelectorAll('.zuopin-da')
    const zp = document.querySelector('.zp')
   
   
    list.addEventListener('click', function (e) {
        if (e.target.tagName === 'SPAN') {
            // console.log(e.target.offsetLeft)
            line.style.transform = `translateX(${e.target.offsetLeft - 572}px)`
            document.querySelector('div.active').classList.remove('active')
   
            e.target.parentNode.classList.add('active')
   
            document.querySelector('.zuopin-da.auto').classList.remove('auto')
            zuopins[e.target.dataset.id].classList.add('auto')
   
            if (e.target.dataset.id === '1') {
                zp.style.transform = `translateX(${-10}px)`
            }
            else if (e.target.dataset.id === '2') {
                zp.style.transform = `translateX(${-974}px)`
            } else {
                zp.style.transform = `translateX(${974}px)`
            }
        }
    })
 })();

 (function(){
    const top1 = document.querySelector('.back-top')
    window.addEventListener('scroll',function() {
        if(document.documentElement.scrollTop > '120') {
            top1.style.opacity = 1
        }else {
            top1.style.opacity = 0
        }
    })
    top1.addEventListener('click',() => document.documentElement.scrollTop = 0)
 })();

(function(){
    const guanzhu = document.querySelector('.guanzhu')
    const tc = document.querySelector('.tc')
    const mask = document.querySelector('.mask')
    let flag = true
    guanzhu.addEventListener('click', function () {
        if (flag) {
            this.classList.add('bian')
            guanzhu.innerHTML = '已关注'
            flag = false
        } else {
            tc.style.display = 'block'
            mask.style.display = 'block'
            tc.addEventListener('click', function (e) {
                if (e.target.dataset.io === '0') {
                    this.style.display = 'none'
                    mask.style.display = 'none'
                } else if (e.target.dataset.io === '1') {
                    mask.style.display = 'none'
                    guanzhu.classList.remove('bian')
                    guanzhu.innerHTML = '关注'
                    flag = true
                    this.style.display = 'none'
                }
            })
        }
    })
})();